import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace, Toast } from 'antd-mobile'

import { Link } from 'react-router-dom'

import NavHeader from '../../components/NavHeader'

import styles from './index.module.css'
import axios from 'axios'
import { withFormik, Form, Field, ErrorMessage  } from 'formik' // 导入表单验证的高阶组件
import * as yup from 'yup' // 将yup中的所有按需导出放到yup对象身上
import { setToken} from '../../utils/auth'

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{5,12}$/

class Login extends Component {
  //首次渲染触发
  componentDidMount () {
  }
  render() {
    
    // 接收到 withFormik 传递来的属性，使用withFormik组件自带的组件渲染页面门就不用在绑定事件和属性了
    // const {  values, handleSubmit, handleChange, handleBlur, errors, touched } = this.props
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>账号登录</NavHeader>
        <WhiteSpace size="xl" />

        {/* 登录表单 */}
        <WingBlank>
          <Form>
            <div className={styles.formItem}>
              <Field  
                  className={styles.input}
                  name="username"
                  placeholder="请输入账号"
                  />
            </div>
            <ErrorMessage  className={styles.error} name='username' component='div'/>
            {/* 长度为5到8位，只能出现数字、字母、下划线 */}
            <div className={styles.formItem}>
            <Field  
                  className={styles.input}
                  name="password"
                  placeholder="请输入密码"
                  />
            </div>
            {/* 长度为5到12位，只能出现数字、字母、下划线 */}
            {/* 将我们的错误显示到div中 */}
            <ErrorMessage  className={styles.error} name='password' component='div'/>
            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                登 录
              </button>
            </div>
          </Form>
          <Flex className={styles.backHome}>
            <Flex.Item>
              <Link to="/registe">还没有账号，去注册~</Link>
            </Flex.Item>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}
// 使用withFormik高阶组件，帮助我们自动将受控组件中的值保存到对应的state中，自动监听change事件，前提是state和表单中的name属性要一样

// 这个高阶组件需要调用两次，第一个调用传入给login组件配置的配置参数，第二次才传入需要改造的组件

Login = withFormik({
  mapPropsToValues: _ => ({username: '', password: ''}), // 提供表单的状态值state
  validationSchema: yup.object().shape({ //在 withFormik 中添加配置项 validationSchema，使用 Yup 添加表单校验规则
    username: yup.string().required('账号为必填项').matches(REG_UNAME,'长度为5到8位，只能出现数字、字母、下划线'),
    password: yup.string().required('密码为必填项').matches(REG_PWD,'长度为5到12位，只能出现数字、字母、下划线')
  }),
  // withFormik函数中的组件是无法获取login 组件的props属性的，所以可以通过第二个属性将props传进来
  handleSubmit: async (value, { props } ) => {
    // value 就是上方传入的state对象
    const { username, password } = value
    const { data: res } = await axios.post('http://api-haoke-web.itheima.net/user/login', {username, password})
    const { status, body, description } = res
    if (status === 200) {
      // 保存token
      Toast.info(description, 2)
      setToken(body.token)
      // 登录成功后返回
      // 做的是登录成功后直接进入之前被拦截的组件
      const { state} = props.location
      if (state) {
        props.history.replace(state.from.pathname)
      } else {
        console.log(1);
        props.history.go(-1)
      }
    } else {
      Toast.info(description, 2)
    }
  } // 提供表单的提交事件
  // 输入的login组件通过props都可以拿到
})(Login)

export default Login